<template>
  <view>
    
    <view class="title-box">
      <view class="title-head">
        确认{{username | nameFilter}}本人操作
      </view>
      <view class="title-but">请保持正脸在取景框中根据屏幕指示完成识别</view>
    </view>
    
    <view class="image-box">
      <image src="/static/images/人脸提示.png" mode="widthFix"></image>
    </view>
    
    <view class="icon-box">
      <view class="item">
        <text class="iconfont icon-shouji" style="font-size: 100rpx; color: #055dfe;"></text>
        <view class="mytext">正对手机</view>
      </view>
      <view class="item">
        <text class="iconfont icon-dengguang" style="font-size: 100rpx; color: #055dfe;"></text>
        <view class="mytext">光线充足</view>
      </view>
      <view class="item">
        <text class="iconfont icon-xiaolian" style="font-size: 100rpx; color: #055dfe;"></text>
        <view class="mytext">脸无遮拦</view>
      </view>
    </view>
    
    <view class="upload">
      <button class="upload-but" type="primary" @click="navTo">开始验证({{sec}})</button>
    </view>
      
      
      
  </view>
</template>

<script>
  export default {
    data() {
      return {
        sec: 5,
        timer: null,
        salaryId: null,
        username: null
      };
    },
    created() {
      this.countdown(this.sec)
      
      this.username = uni.getStorageSync('nickName')
      console.log(this.username);
    },
    onUnload() {
      console.log('定时器销毁');
      clearTimeout(this.timer);
    },
    methods:{
      countdown(seconds) {
        if (seconds <= 0) {
          console.log("倒计时结束！");
          this.navTo()
        } else {
          console.log(`倒计时剩余 ${seconds} 秒`);
          this.sec = seconds
          this.timer = setTimeout(() => {
            this.countdown(seconds - 1);
          }, 1000); // 1秒后再次调用countdown函数
        }
      },
      navTo(){
        console.log('定时器销毁');
        clearTimeout(this.timer);
        // uni.redirectTo({
        //   url: './facescan?id=' + this.salaryId
        // })
        console.log('跳转前',this.salaryId);
        uni.redirectTo({
          url: './scan?salaryId=' + this.salaryId
        })
      },
    },
    onLoad(options) {
      this.salaryId = options.salaryId
      console.log(options);
    }
  }
</script>

<style lang="scss">
  
  .upload{
    position: fixed;
    width: calc(100% - 60rpx);
    left: 30rpx;
    bottom: 30rpx;
    .upload-but{
      background-color: #055dfe;
      width: 100%;
    }
  }
  
  .icon-box{
    display: flex;
    justify-content: space-around;
    .item{
      .mytext{
        padding-top: 30rpx;
        font-size: 30rpx;
      }
    }
  }
  
  .image-box{
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .title-box{
    margin: 50rpx 0;
    margin-top: 100rpx;
    .title-head{text-align: center; font-size: 40rpx; font-weight: bold; margin-bottom: 20rpx;}
    .title-but{text-align: center; color: #999;}
  }
</style>
